<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box1">
        <div class="content">
            <ul class="clear">
                <div id="one" width='100'>水电费</div>
                <div id="two" width='200'>消息称</div>
                <div id="three" width='300px'>从VB你</div>
                <li id="ccin">
                    看电视了荆防颗粒
                    <span>嘻嘻哈哈</span>
                </li>
                <li class="uu1">2</li>
                <li>3</li>
                <li class="kkk">
                    4
                    <i>女女女女</i>
                </li>
                <li>5</li>
                <li class="lol">6</li>
            </ul>
            <div id="bottom">
                <div id="left">
                    <div id="right">
                        <input type="text" name="myname" value="" placeholder="">
                        <input type="password" name="ee" value="" placeholder="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            // 查找
            $('.content').children().css('border','8px solid red');
            $('span').parent().css('background','lightskyblue');

            // add()   li 和 span 一起受影响
            $('span').add('#right').css('border-right','10px solid blue');

            // andSelf() 1.8 版本之后不能用了 / addBack()  
            // 子级 span  和 他的父级 #ccin 一起
            $('#ccin').children('span').addBack().css('border-left','20px solid red')

            // end()  从#box1 查找到i, 则返回#box1
            $('.kkk').children('i').end().css('border','3px solid lightpink')
            $('#box1').find('i').end().css('border','3px solid green')
        })
    </script>
</body>
</html>